<template>
	<div class="wrapper">
		<vue-cropper
			ref="cropper"
			v-bind="option" />
	</div>
</template>


<script>
import Vue from 'vue'
import vueCropper from 'vue-cropper'
import UploadImg from '@/components/UploadImg'

export default {
	data() {
		return {
			option: {
				img: '/static/white.png',// 裁剪图片的地址	空	url 地址 || base64 || blob
				outputSize: 1,// 裁剪生成图片的质量	1	0.1 - 1
				outputType: 'jpg',// 裁剪生成图片的格式	jpg (jpg 需要传入jpeg)	jpeg || png || webp
				info: true,// 裁剪框的大小信息	true	true || false
				canScale: true,// 图片是否允许滚轮缩放	true	true || false
				autoCrop: true,// 是否默认生成截图框	false	true || false
				autoCropWidth: 200,// 默认生成截图框宽度	容器的80%	0~max
				autoCropHeight: 200,// 默认生成截图框高度	容器的80%	0~max
				fixed: true,// 是否开启截图框宽高固定比例	true	true | false
				fixedNumber: [1, 1],// 截图框的宽高比例	[1, 1]	[宽度, 高度]
				full: false,// 是否输出原图比例的截图	false	true | false
				fixedBox: true,//	固定截图框大小 不允许改变	false	true | false
				canMove: true,// 上传图片是否可以移动	true	true | false
				canMoveBox: true,// 截图框能否拖动	true	true | false
				original: false,// 上传图片按照原始比例渲染 false true | false
			}
		}
	},
	components: {
		vueCropper, UploadImg
	},
	methods: {
    ready() {
      this.option.img = this.static_pic + this.imgPath;
    },

		getCropData() {
			// 获取截图的base64 数据
			this.$refs.cropper.getCropData((data) => {
				// do something
				console.log(data)  
			})
		},

		getCropBlob() {
			return new Promise((resolve, reject) => {
				// 获取截图的blob 数据
				this.$refs.cropper.getCropBlob(data => {
					// do something
					resolve(data);
				});
			});
		},
  },
  props: {
    imgPath: {
      type: String,
      default: ''
    }
  },
  mounted() {
    this.ready();
  }
}
</script>

<style scoped>
.wrapper { height: 350px; }
</style>
